<template>
  <div class="linxi_six">
    <m-header modile-title="练习6" go-back="true"></m-header>
    <div class="input_box">
      <img :src="url">
      <div class="inputs">
        <input type="text" placeholder="请输入用户名" @click="inputName">
        <input type="password" placeholder="请输入密码" @click="inputPass">
      </div>
      <div class="change_li">
        <ul>
          <li>
            <p>选举测试内容</p>
            <button @click="$router.push('/cOne')">立即投票</button>
          </li>
          <li>
            <p>事物选举投票内容测试</p>
            <button @click="$router.push('/cTwo')">立即投票</button>
          </li>
          <li>
            <p>满意度投票测试内容</p>
            <button @click="$router.push('/cThree')">立即投票</button>
          </li>
        </ul>
      </div>
    </div>
    <div class="li_chose">
      <ul>
        <li ref="lit" v-for="(room,index) in list" :key="index">
          {{room.room}}室<span @click="changeBg($event,index)">未回收<span class="yuan"></span></span>
        </li>
      </ul>
      <div class="okBtn" @click="okBtn()">确认提交</div>
    </div>
  </div>
</template>
<style lang="scss">
  .linxi_six {
    padding-top: 60px;
    background: #ffffff;
    .input_box {
      width: 100%;
      text-align: center;
      padding-top: 20px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
      .inputs {
        padding: 20px 0;
        input {
          width: 50%;
          height: 40px;
          margin-top: 10px;
          border: 1px solid #999;
          padding: 5px;
          font-size: 15px;
        }
      }
    }
    .change_li {
      width: 100%;
      ul {
        width: 100%;
        border-top: 1px solid #f2f2f2;
        li {
          padding: 10px;
          border-bottom: 2px solid #f2f2f2;
          p {
            font-size: 14px;
            margin-bottom: 10px;
          }
          button {
            width: 95%;
            height: 40px;
            border: 1px solid #007aff;
            font-size: 15px;
            color: #007aff;
          }
        }
      }
    }
    .li_chose {
      width: 100%;
      margin-top: 50px;
      ul {
        li {
          width: 100%;
          height: 60px;
          font-size: 20px;
          padding: 0 10px;
          line-height: 60px;
          span {
            float: right;
            color: #888;
            .yuan{
              width: 25px;
              height: 25px;
              border-radius: 50%;
              border: 1px solid #333;
            }
          }
        }
      }
    }
    .okBtn{
      width: 200px;
      height: 40px;
      background: #00c000;
      font-size: 20px;
      color: #fff;
      line-height: 40px;
      text-align: center;
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'

  export default {
    data() {
      return {
        url: "http://www.xuxin123.com/code/waterfall/images/33.jpg",
        list:[
          {room: '001'},
          {room: '002'},
          {room: '003'},
          {room: '004'},
        ],
        slectIndex: ''
      }
    },
    methods: {
      inputName() {
        this.url = 'http://www.xuxin123.com/code/waterfall/images/33.jpg'
      },
      inputPass() {
        this.url = 'http://www.xuxin123.com/code/waterfall/images/32.jpg'
      },
      changeBg(e,index) {
        // console.log(e.path[1]);
        // e.path[1].style.background='#333'
        this.slectIndex = index
        console.log(this.slectIndex)
        this.$refs['lit'][this.slectIndex].style.background = '#f2f2f2'
      },
      okBtn(){
        this.$refs['lit'][this.slectIndex].style.background = '#fff'
      }
    },
    components: {
      mHeader
    }
  }
</script>
